<template>
  <nut-table :columns="columns" :data="data"></nut-table>
</template>

<script lang="ts">
import { ref } from 'vue';
import axios from 'axios';


interface DataItem {
  time: string;
  temperature: number;
  humidity: number;
  voltage: number;
}

const columns = ref([
  {
    title: '时间',
    key: 'time'
  },
  {
    title: '温度/℃',
    key: 'temperature'
  },
  {
    title: '湿度/%',
    key: 'humidity'
  },
  {
    title: '电压/V',
    key: 'voltage'
  }
]);

const data = ref<DataItem[]>([]);

  setInterval(() => {
  axios
    .get<DataItem[]>('http://150.158.11.142:5000/history')
    .then((response:any) => {
      data.value = response.data.objects
        .map(item => ({
          time: item.collect_time,
          temperature: item.temperature,
          humidity: item.humidity,
          voltage: item.voltage
        }))
        .sort((a, b) => b.time.localeCompare(a.time));
    })
    .catch(error => {
      console.log(error);
    });
}, 1000);

export default {
  data() {
    return {
      columns,
      data
    };
  }
};
</script>
